<template>
  <div class="productTotal">
    <div class="title">
      <span class="name">产品统计</span>
      <span class="btn"><a-icon type="form" class="iconfont" /></span>
    </div>
    <div class="productTable">
      <div class="selectRadio">
        <a-radio-group default-value="ALL" button-style="solid" v-model="statisticalType" @change="changeHandler">
          <a-radio-button value="ALL">
            全部
          </a-radio-button>
          <a-radio-button value="MANAGER">
            我负责的
          </a-radio-button>
          <a-radio-button value="JOIN">
            我参与的
          </a-radio-button>
        </a-radio-group>
      </div>
      <div class="tableItem">
        <a-table
          :columns="productColumn"
          :rowKey="(record, index) => {return index}"
          :data-source="productData"
          :pagination="false"
          :loading="loadVisible"
          :scroll="{ y: 'calc(82vh - 64px - 170px - 16px - 43px)'}"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectList, getProjectCaches } from '@/api/projectManage.js'
export default {
  name: 'productTotal',
  props: {
    // productData: {
    //   type: Array,
    //   default: function() { return [] }
    // }
  },
  data() {
    return {
      productColumn: [
        { title: "节点名称", dataIndex: "nodeName", key: "nodeName", ellipsis: true, width: '40%' },
        { title: "项目数", dataIndex: "num", key: "num", ellipsis: true, width: '35%' },
        { title: "占比", dataIndex: "per", key: "per", ellipsis: true, width: '30%' },
      ],
      statisticalType: "ALL",
      productData: [],
      loadVisible: false
    }
  },
  mounted() {
    this.getTableDataParams('ALL')
  },
  methods: {
    changeHandler(e) {
      let key = e.target.value
      if (key === 'ALL' || key === 'MANAGER' || key === 'JOIN') {
        this.getTableDataParams(key)
      } else if (key === 'ATTENTION') {
        this.getAttentionData(key)
      }
    },
    // 获取关注数据
    getAttentionData(key) {
      if (isRenderTable) {
        this.loadVisible = true
        this.productData = []
      }
      getAttentionsData().then(res => {
        if (res.status === 200) {
          if (res.data && res.data.projectList) {
            let oidObj = {
              oids: res.data.projectList.split(',')
            }
            if (key === 'ATTENTION') {
              this.hasAttention = []
              this.getTableData(oidObj, isRenderTable, isStatistical)
            } else {
              this.hasAttention = res.data.projectList.split(',')
            }
          } else {
            this.loadVisible = false
            // this.tableData = []
          }
        } else {
          this.$message.error('获取关注数据失败')
        }
      })
    },
    // 2.获取数据
    getTableDataParams(tabType) {
      this.loadVisible = true
      this.productData = []
      let data = {
        "type": tabType
      }
      getProjectList(data).then(res => {
        if (res && res.status === 200) {
          if (res.data && res.data.data.length > 0) {
            // let oidObj = {
            //   oids: res.data.data
            // }
            let arr = res.data.data
            this.getTableData(arr)
          } else {
            this.loadVisible = false
            this.productData = []
          }
        } else {
          this.productData = []
        }
      });
    },
    getTableData(paramsData) {
      getProjectCaches(paramsData).then(res => {
        if (res.status === 200) {
          if (res.data && res.data.length > 0) {
            res.data.map(it => {
              // 先全部转化为大写，然后再转化为小写
              for (var key in it) {
                it[key.toUpperCase()] = it[key];
                delete (it[key]);
              }
            })
            res.data.map(it => {
              // 先全部转化为大写，然后再转化为小写
              for (var key in it) {
                it[key.toLowerCase()] = it[key];
                delete (it[key]);
              }
            })
            // console.log(res.data)
            this.statisticalNode(res.data.filter(item => item.projecttype === '产品开发项目'))
          }
        } else {
          this.loadVisible = false
          this.$message.error('获取数据失败')
        }
      }).catch(error => {
        this.loadVisible = false
        this.$message.error('获取数据接口异常')
      })
    },
    statisticalNode(data) {
      let statisticalRes = {}
      const total = data.length
      data.forEach(item => {
        // item.currentnode没有值的不统计
        if (item.currentnode) {
          statisticalRes[item.currentnode] = statisticalRes[item.currentnode] || []
          statisticalRes[item.currentnode].push(item)
        }
      })
      let statisticalData = []
      for (let key in statisticalRes) {
        let statisticalItem = statisticalRes[key]
        statisticalData.push({
          nodeName: key,
          data: statisticalItem,
          num: statisticalItem.length,
          per: ((statisticalItem.length / total) * 100).toFixed(0) + '%'
        })
      }
      this.productData = statisticalData
      this.loadVisible = false
      // console.log(this.productData)
    },
  }
}
</script>
<style lang="less" scoped>
.productTotal {
      margin-top: 16px;
      padding: 12px;
      background-color: #fff;
      color: #333;
      min-height: calc(82vh - 64px - 70px - 16px);
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont{
          margin-left: 10px;
          color: #a5a5a5;
          vertical-align: middle;
          cursor: pointer;
        }
        .name {
          font-weight: 500;
          font-style: normal;
          font-size: 18px;
        }
        .btn {
          // border: 1px solid rgba(213, 218, 224, 1);
          border-radius: 4px;
          padding: 0px 9px;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #386bd7;
          }
        }
      }
      .productTable {
        .selectRadio {
          margin-top: 12px;
          /deep/ .ant-radio-group {
            width: 100%;
            .ant-radio-button-wrapper {
              padding: 0px 0.2vw;
              width: 33%;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .tableItem {
          margin-top: 8px;
        }
      }
    }
</style>